<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
</head>
<body>
    <div class="row">
        <span>用户名</span>
        <input type="text" id="username">
    </div>
    <div class="row">
        <span>密码</span>
        <input type="password" id="password">
    </div>
    <div class="row">
        <button id="submit">登录</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script>
        let name = document.querySelector('#username');
        let pass = document.querySelector('#password');
        let btn = document.querySelector('#submit');
        btn.onclick = function () {
            if (name.value == '' || pass.value == '') {
                alert("用户名或者密码为空！");
                return;
            }
            let message = {
                    "username": name.value,
                    "password": pass.value,
                }
            $.ajax({
                type: 'post',
                url: 'login',
                // data: {
                //     "username": name.value,
                //     "password": pass.value,
                // },
                // data: JSON.stringify(message),
                data: message,
                success: function (body) {
                    if (body.status == 0) {
                        alert("登录成功！");
                        location.assign("index.html");
                    }else {
                        alert("登录失败！用户名或者密码为空！");
                        name.value = '';
                        pass.value = '';
                    }
                }
            });
        }
    </script>
</body>
</html>